<template>
    <div>
        <el-form :rules="rules" ref="loginFrom" :model="loginForm" class="loginContainer">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="学生登录" name="first">
                    <el-form-item prop="username">
                        <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="输入密码"></el-input>
                    </el-form-item>
                    <el-button type="primary" style="width: 100%" @click="studentLogin">登录</el-button>
                </el-tab-pane>
                <el-tab-pane label="教师登录" name="second">
                    <el-form-item prop="username">
                        <el-input type="text" auto-complete="false" v-model="teacherLoginForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" auto-complete="false" v-model="teacherLoginForm.password" placeholder="输入密码"></el-input>
                    </el-form-item>
                    <el-button type="primary" style="width: 100%" @click="teacherLogin">登录</el-button>
                </el-tab-pane>
            </el-tabs>


        </el-form>
    </div>

</template>

<script>
    export default {
        name: "Login2",
        data() {
            return {
                activeName: 'first',
                loginForm: {
                    username: 'studnt',
                    password: '123',
                },
                teacherLoginForm: {
                    username: 'teacher',
                    password: '123'
                },
                checked: true,
                rules: {
                    username: [{required: true,message: '请输入用户名',trigger: 'blur'}],
                    password: [{required: true,message: '请输入密码',trigger: 'blur'}],
                }

            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            studentLogin(){

            },
            teacherLogin(){

            }
        }
    }
</script>

<style scoped>
    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6 ;
    }
    .loginTitle {
        margin: 0px auto 40px auto;
        text-align: center ;
    }
    .loginRemember {
        text-align: left;
        margin: 0px 0px 15px 0px  ;
    }
    .el-form-item__content {
        display: flex;
        align-items: center;
    }
</style>